<template>
  <div>
    <div class="home_nav">
      <van-search shape="round" background="#fff" placeholder="请输入搜索关键词" />
    </div>
    <div class="home_swiper">
      <ul>
        <li v-for="(item,index) in nav" :key="index">
          <img width="50px" :src="item.icon" alt />
          <p>{{item.name}}</p>
        </li>
      </ul>
    </div>

    <van-divider :style="{ color: '#000', borderColor: 'goldenrod', padding: '0 16px' }">附近商家</van-divider>

    <van-sticky :offset-top="50">
      <ul class="sticky">
        <li>综合排序</li>
        <li>销量最高</li>
        <li>距离最近</li>
        <li>筛选</li>
      </ul>
    </van-sticky>

    <div class="home_container">
      <div class="home_card" @click="goDetails(item.mtWmPoiId)" v-for="(item,index) in goods" :key="index">
        <img width="30%" :src="item.picUrl" alt />
        <div class="home_cons">
          <h4 class="van-ellipsis">{{item.shopName}}</h4>
          <p class="cons_sale">
            <span>
              <van-rate
                v-model="value"
                :size="12"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
              />
            </span>
            <span>{{item.monthSalesTip}}</span>
            <span>{{item.deliveryTimeTip}} | {{item.distance}}</span>
          </p>

          <p class="cons_price">
            <span>{{item.minPriceTip}}</span>
            <span>{{item.shippingFeeTip}}</span>
            <span>{{item.averagePriceTip}}</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value:""
    };
  },
  mounted() {
    this.$store.dispatch("getNav");
    this.$store.dispatch("getData");
  },
  computed: {
    nav: function() {
      return this.$store.state.nav;
    },
    goods: function() {
      return this.$store.state.goods;
    }
  },
  methods:{
    goDetails(id) {
      this.$router.push({
        path:'/details',
        query:{
          id:id
        }
      })
    }
  }
};
</script>

<style scoped>
ul,
li {
  list-style: none;
}
.home_nav {
  width: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  border-bottom: 1px solid lightgrey;
}
.home_swiper {
  width: 100%;
  margin-top: 60px;
  overflow: auto;
}
.home_swiper ul {
  width: 200%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.home_swiper ul li {
  width: 10%;
  font-size: 12px;
  text-align: center;
  line-height: 25px;
  margin-top: 5px;
}
.sticky {
  width: 100%;
  height: 40px;
  border-top: 1px solid lightgrey;
  border-bottom: 1px solid lightgrey;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
}
.home_container {
  width: 100%;
  box-sizing: border-box;
  padding: 0px 8px;
}
.home_card {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}
.home_cons {
  width: 66%;
  font-size: 16px;
}
.cons_sale {
  font-size: 12px;
  box-sizing: border-box;
  padding: 0px 1px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cons_price {
  margin:5px 0px;
  font-size: 13px;
}
.cons_price span {
  margin-right: 10px;
}
</style>